<template>
  <div>
    <CusLayout :title="data.name" :config="a">
      <template #header="raw">
        {{ data }}
        {{ raw }}
        <ElButton style="color: blue;">clickMe</ElButton>
      </template>
      <BaseAgGrid :columnDefs="columnDefs" :defaultColDef="defaultColDef" :enableCellSpan="true" :rowData="rowData" />
    </CusLayout>
  </div>
</template>

<script setup>
import BaseAgGrid from "BaseAgGrid";
import CusLayout from "CusLayout";
import { ref } from "vue";
import useData from "useData";

const a = {
  company: "111"
}

const { data } = useData();

const rowData = ref([
  {
    name: "张三123",
    age: 18,
    gender: "男",
    phone: "13800138000",
    email: "zhangsan@example.com",
    address: "北京市海淀区",
    company: "北京科技有限公司",
    position: "工程师",
    department: "技术部",
  },
  {
    name: "李四",
    age: 20,
    gender: "女",
    phone: "13800138001",
    email: "lisi@example.com",
    address: "上海市浦东新区",
    company: "上海科技有限公司",
    position: "设计师",
    department: "设计部",
  },
  {
    name: "王五",
    age: 22,
    gender: "男",
    phone: "13800138002",
    email: "wangwu@example.com",
    address: "广州市天河区",
    company: "广州科技有限公司",
    position: "销售经理",
    department: "销售部",
  },
]);

const columnDefs = ref([
  { field: "name" },
  { field: "age" },
  {
    field: "gender",
  },
  { field: "phone" },
  { field: "email" },
  { field: "address" },
  { field: "company" },
]);

const defaultColDef = ref({
  flex: 1,
});
</script>

<style></style>
